<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      :columns="basicData.columns"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      list-api="queryNotification"
      del-api="deleteNotification"
      export-api="exportSysRole"
      :export-name="$route.meta.title"
    />
    <!--新增-->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1100px">
      <el-form ref="dataForm" :rules="rules" :model="temp" :inline="false" label-position="right" label-width="120px" style="width: 100%">
        <el-form-item label="标题" prop="title">
          <el-input v-model="temp.title" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="temp.type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="temp.priority" placeholder="请选择">
            <el-option
              v-for="item in priorityOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间段" prop="rangeTime">
          <el-date-picker v-model="temp.rangeTime" type="datetimerange" :default-time="['08:30:00', '18:00:00']" style="width: 100%" clearable />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <tinymce v-model="temp.content" :height="300" />
        </el-form-item>
        <el-form-item label="发布对象" prop="username">
          <el-select v-model="temp.username" multiple placeholder="请选择" clearable class="filter-item" filterable style="width: 100%">
            <el-option-group v-for="group in candidateOptions" :key="group.value" :label="group.value">
              <el-option v-for="item in group.children" :key="item.key" :label="item.value" :value="item.key" />
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryNotificationPriority, addNotification, updateNotification } from '@/api/admin'
import { queryUsername } from '@/api/activiti'
import { queryNotificationType } from '@/api/home'
import Tinymce from '@/components/Tinymce'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {
    Tinymce
  },
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '标题', field: 'title' }, type: 'copy' },
          { config: { title: '类型', field: 'typeCn' }},
          { config: { title: '优先级', field: 'priorityCn' }},
          { config: { title: '发布者', field: 'publisher' }},
          { config: { title: '日期', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' },
            type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchForm: [
          { type: 'Input', label: '标题', prop: 'title', width: '180px' },
          { type: 'Select', label: '类型', prop: 'type', options: [], width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } }
        ]
      },
      priorityOptions: [],
      typeOptions: [],
      candidateOptions: [],
      temp: {
        id: undefined,
        content: ``
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        title: [{ required: true, message: '请输入标题！', trigger: ['blur', 'change'] },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型！', trigger: 'change' }],
        content: [{ required: true, message: '请输入内容！', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getType()
  },
  mounted() {
  },
  methods: {
    // 业务逻辑
    getType() {
      queryNotificationType().then(response => {
        this.basicData.searchForm[1].options = response.data
        this.typeOptions = response.data
      })
      queryNotificationPriority().then(response => {
        this.priorityOptions = response.data
      })
      queryUsername().then(response => {
        this.candidateOptions = response.data
      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        content: ''
      }
    },
    handleDetail(id) {
      this.$router.push({
        name: 'prjmgtDetail',
        query: { id: id }
      })
    },
    // 新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = {
            body: {},
            expand: {}
          }
          tempData.body.content = this.temp.content
          tempData.body.priority = this.temp.priority
          tempData.body.startTime = this.temp.rangeTime ? this.temp.rangeTime[0] : null
          tempData.body.endTime = this.temp.rangeTime ? this.temp.rangeTime[1] : null
          tempData.body.title = this.temp.title
          tempData.body.type = this.temp.type
          tempData.expand.username = this.temp.username ? this.temp.username.toString() : null
          tempData.body.publisher = this.name
          addNotification(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 编辑
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.temp.rangeTime = this.temp.startTime ? [this.temp.startTime, this.temp.endTime] : null
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = {
            body: {},
            expand: {}
          }
          tempData.body.id = this.temp.id
          tempData.body.content = this.temp.content
          tempData.body.priority = this.temp.priority
          tempData.body.startTime = this.temp.rangeTime ? this.temp.rangeTime[0] : null
          tempData.body.endTime = this.temp.rangeTime ? this.temp.rangeTime[1] : null
          tempData.body.title = this.temp.title
          tempData.body.type = this.temp.type
          tempData.expand.username = this.temp.username ? this.temp.username.toString() : null
          tempData.body.publisher = this.name
          updateNotification(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    }
  }
}
</script>

<style scoped>
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>
